<template>
    <el-card class="box-card">

        <el-row>
            <el-row :gutter="12">
                <el-col :span="6" id="Shortcut">
                    <el-card shadow="hover" class="cardbg_one" >
                    <div>
                        <i class="el-icon-tickets"></i>
                        <div><router-link to="/Project/Projects">所有项目</router-link></div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover" class="cardbg_two">
                          <i class="el-icon-circle-plus-outline"></i>
                        <div>新增项目</div>
                        
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover" class="cardbg_three">
                         <i class="el-icon-service"></i>
                        <div><router-link to="/Customer">所有客户</router-link></div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="hover" class="cardbg_four">
                        <i class="el-icon-more"></i> 
                       <div> 其他</div>
                    </el-card>
                </el-col>
            </el-row>
        </el-row>
    </el-card>

</template>
 <style lang="scss" scoped>
.el-card{
    text-align: center;
    color:#fff;
    
    a{
        color:#fff;
        text-decoration: none;
    }
}
.el-card i{ font-size: 25px; margin-bottom: 10px;}
#Shortcut .el-card__body{
    background-color: #F00;
}
.is-hover-shadow:hover{background: #666;   }
.cardbg_one{ background:#27a9e3;}
.cardbg_two{ background:#28b779;}
.cardbg_three{ background:#ffb848;}
.cardbg_four{ background:#f74d4d;}

</style>
